$.extend(planner.garage,  {
    ui:
    {
        disable_buttons_that_need_selection: function() {
            //$("#btnUseThisMech").button("disable");
            //$("#btnRenameMech").button("disable");
            //$("#btnDeleteMech").button("disable");
            $("#btnManageGarage").hide();
            
        },
        enable_buttons_that_need_selection: function() {
            //$("#btnUseThisMech").button("enable");
            //$("#btnRenameMech").button("enable");
           // $("#btnDeleteMech").button("enable");
           $("#btnManageGarage").show();
        },
        is_visible: function()
        {
            return $("#garage").css("display") != "none";
        },
        selected_mech: false,
        init: function(){
        },
        setup: function(){
            planner.garage.ui.setup_buttons();
            planner.garage.ui.setup_table();
            planner.garage.ui.setup_grid();
            $('body').click(remove_ui_selections);
            $('body').dblclick(remove_ui_selections);
        },
        setup_grid: function() {

            $(".cell-garage-grid").dblclick( function() { planner.garage.use_mech( $(this) ) });
            
            planner.garage.ui.selected_mech = false;
            
            $(".cell-garage-grid").click( function(event) {
                event.stopPropagation();
                //#$(".cell-garage-grid").css("border", "");
                //#$(".cell-garage-grid").css("margin", "3px");
                //#$(".cell-garage-grid").css("margin-bottom", "6px");
                //$(this).css("border", "solid #ccc 1px");
                planner.drop.ui.remove_selections();
                
                if ( $(this).hasClass("gradient") ) {
                    $(this).removeClass("gradient");
                }
                else
                {
                    $(this).addClass("gradient");
                    planner.garage.ui.selected_mech = $(this);
                }
            
                n = 0
                $(".cell-garage-grid").each(function() {
                    if ( $(this).hasClass("gradient") )
                        n = n + 1
                });
                
                if ( n > 0 ) {
                   // $('#btnUseThisMech').button( "enable" ).button( "refresh" ) ;
                   // $('#btnRenameMech').button( "enable" ).button( "refresh" );
                   //$('#btnDeleteMech').button( "enable" ).button( "refresh" ); 
                    $("#btnManageGarage").show();
                } else {
                   // $('#btnUseThisMech').button( "disable" ).button( "refresh" );
                   // $('#btnRenameMech').button( "disable" ).button( "refresh" );
                   // $('#btnDeleteMech').button( "disable" ).button( "refresh" ); 
                    $("#btnManageGarage").hide();
                }
                
            });
            
            
            
             
            $(".cell-garage-grid").hover( 
                function() {
                    //alert( $(this).attr("id") )
                    $("#" + $(this).attr("id") + " ul").css("color", "white");
                    $("#" + $(this).attr("id") + " ul").css("font-weight", "bold");
                    //$(this).addClass("gradient");
                    
                    //$(this).css("cursor", "pointer");
                    //$(this).css("border", "solid #ccc 3px");
                    //$(this).css("margin", "0px");
                },
                function() {
                    $("#" + $(this).attr("id") + " ul").css("color", "#ccc");
                    $("#" + $(this).attr("id") + " ul").css("font-weight", "normal  ");
                    //$(this).removeClass("gradient");
                    //$(this).css("cursor", "default");
                    //$(this).css("border", "");
                    //$(this).css("margin", "6px");
                }
            );

        
        },
        setup_table: function() {
            $(".row-garage-table").dblclick( function() { planner.garage.use_mech( $(this) ) });
            
            $(".row-garage-table").click( function(event) {
                event.stopPropagation();
                element = $(this);
                
                if ( element.hasClass("gradient") )
                {
                    planner.drop.ui.remove_selections();
                    $('#btnManageGarage').hide();
                }
                else
                {
                    planner.drop.ui.remove_selections();
                    planner.drop.ui.toggle_selection(element);
                    planner.garage.ui.selected_mech = $(this);
                    n = 0
                    $(".row-garage-table").each(function() {
                        if ( $(this).hasClass("gradient") )
                            n = n + 1
                    });
                    
                    if ( n > 0 ) {
                        // $('#btnUseThisMech').button( "enable" ).button( "refresh" ) ;
                       // $('#btnRenameMech').button( "enable" ).button( "refresh" );
                       //$('#btnDeleteMech').button( "enable" ).button( "refresh" );
                       $('#btnManageGarage').show(); 
                        
                    } else {
                       // $('#btnUseThisMech').button( "disable" ).button( "refresh" );
                       // $('#btnRenameMech').button( "disable" ).button( "refresh" );
                       // $('#btnDeleteMech').button( "disable" ).button( "refresh" ); 
                        $('#btnManageGarage').hide(); 
                    }
                }
            }).tooltip({ show: { delay: 2000 } });
            
            $(".cell-garage-grid").tooltip({ show: { delay: 2000 } });
            
            $('.uisortgarage')
            .wrapInner('<span title="sort this column"/>')
            .each(function(){
                
                var th = $(this);
                
                th.click(function(event){ event.stopPropagation(); planner.garage.ui.sort_table($(this)) });
                th.dblclick(function(event){ event.stopPropagation(); planner.garage.ui.sort_table($(this)) });
                    
            });            
        },
        setup_buttons: function()
        {
            
            $("#btnRoster").button({
                text: false,
                icons: {
                    primary: "ui-icon-calculator"
                }
            }).click(function(event){
                event.stopPropagation();
                $(".post").hide();
                planner.roster.ui.update(function(){ $("#roster").show(); $("#rostercontent").show(duration=0); });
            }).tooltip({ show: { delay: 1000 } });
                
         
                       
            $("#btnCopyFromSmurfy").button({
                icons: {
                    primary: "ui-icon-link"
                }
            }).tooltip({ show: { delay: 1000 } });
            
            $("#btnCopyFromSmurfy").click(function(){
                planner.dialogs.copyMech.show();
            });
            
            $("#btnRenameMech").click(function(caller, x) {
            
            
                n = planner.garage.ui.selected_mech.attr("id").substr(1);
                garage = planner.garage.mechs;
                
                for ( m in garage )
                {
                    if ( n == garage[m].id )
                    {
                        $("#txtRenameThisMech").val(garage[m].name)
                    }
                }
                
                planner.dialogs.renameMech.show();
            });
            
            $("#btnGarageSort").button({
                text: false,
                icons: {
                    primary: "ui-icon-shuffle",
                    secondary: "ui-icon-triangle-1-s"
                }
            }).click(function() {
                event.stopPropagation();
                $('#mnuGarageSort').css("display","block");
            
                $('#mnuGarageSort').menu({ position: { my: "left top", at: "left bottom", of: this } }).show()
                var menu = $('#mnuGarageSort').menu().show().position({
                    my: "left top",
                    at: "left bottom",
                    of: this
                  });
                
                $('body').one("click", function() {  $('#mnuGarageSort').css("display","none"); })
            }).tooltip({ show: { delay: 1000 } });;
               
            $("#btnUseThisMech").click(function() {
                planner.garage.use_mech(planner.garage.ui.selected_mech);
                return false;
            });
            $("#btnDeleteMech").click(function() {
                planner.garage.remove_mech(planner.garage.ui.selected_mech);
                return false;
            });   
            $("#btnGarageSortName").click(function() {
                planner.garage.ui.update("name");
                return false;
            });
            $("#btnGarageSortMech").click(function() {
                planner.garage.ui.update("mechtype");
                return false;
            });
            $("#btnGarageSortDate").click(function() {
                planner.garage.ui.update("lastStamp");
                return false;
            });           
            $("#btnGarageSortSpeed").click(function() {
                planner.garage.ui.update("speed");
                return false;
            });
            $("#btnGarageSortWeight").click(function() {
                planner.garage.ui.update("weight");
                return false;
            });
            
            
            

            $("#btnToggleGarageViewTable").button({
                text: false,
                icons: {
                    
                    primary: "ui-icon-newwin",
                }
            }).click(function(event){
                planner.garage.lastView = "table"
                $("#tblGarage").css("display", "block");    
                $("#gridGarage").css("display", "none");
                $("#btnToggleGarageViewTable").hide();
                $("#btnToggleGarageViewGrid").show();
            }).tooltip({ show: { delay: 1000 } }).hide();
            
            $("#btnToggleGarageViewGrid").button({
                text: false,
                icons: {
                    
                    primary: "ui-icon-newwin",
            }
            }).click(function(event){
                planner.garage.lastView = "grid"
                $("#tblGarage").css("display", "none");    
                $("#gridGarage").css("display", "block");
                $("#btnToggleGarageViewGrid").hide();
                $("#btnToggleGarageViewTable").show();
            }).tooltip({ show: { delay: 1000 } }).hide();

            if ( planner.garage.lastView == "grid" )
            {
                $("#btnToggleGarageViewTable").show();
            }
            else
            {
                $("#btnToggleGarageViewGrid").show();                
            }
            
            $("#btnGarageView").button({
                text: false,
                icons: {
                    
                    primary: "ui-icon-newwin",
                    secondary: "ui-icon-triangle-1-s"
                }
            }).click(function(event){
                event.stopPropagation();
                $('#mnuGarageView').css("display","block");
                //$('#mnuAssignLance').css("display","none");
                $('mnuRosterViewh').menu({ position: { my: "left top", at: "left bottom", of: this } }).show()
                var menu = $('#mnuGarageView').menu().show().position({
                    my: "left top",
                    at: "left bottom",
                    of: this
                });
                
                $('body').one("click", function() {  $('#mnuGarageView').css("display","none"); })
            }).tooltip({ show: { delay: 1000 } }).hide();
   
            $("#btnManageGarage").button({
                text: false,
                icons: {
                    
                    primary: "ui-icon-wrench",
                    secondary: "ui-icon-triangle-1-s"
                }
            }).click(function(event){
                event.stopPropagation();
                $('#mnuManageGarage').css("display","block");
                //$('#mnuAssignLance').css("display","none");
                $('mnuManageGarage').menu({ position: { my: "left top", at: "left bottom", of: this } }).show()
                var menu = $('#mnuManageGarage').menu().show().position({
                    my: "left top",
                    at: "left bottom",
                    of: this
                }).dblclick(function(event){
                    event.stopPropagation();
                }).tooltip({ show: { delay: 1000 } });;
                
                $('body').one("click", function() {  $('#mnuManageGarage').css("display","none"); })
            }).tooltip({ show: { delay: 1000 } }).hide();
            
            $("#btnGarageViewTable").click(function(event) {
                planner.garage.lastView = "table"
                $("#tblGarage").css("display", "block");    
                $("#gridGarage").css("display", "none");    
            });
            $("#btnGarageViewGrid").click(function(event) {
                planner.garage.lastView = "grid"
                $("#tblGarage").css("display", "none");    
                $("#gridGarage").css("display", "block");
            });
            //alert("L" + planner.garage.lastView);
            if ( planner.garage.lastView == "table" ) {
                $("#tblGarage").show();    
            }
            else
            {
                $("#gridGarage").show();    
            }

            
        },
        update: function (order, caller)
        {
            var payload = { 
                o: order,
                p: planner.mech.player,
            }
    
            $.ajax({ 
                url: "/g",
                type: "POST",
                data: payload
            })
            .done( function(data) {
                $("#garagediv").html( data );
                planner.garage.ui.setup();
                if (caller) {
                    caller();
                }
            });
        },
        sort_table: function(element)
        {
            $('#tblGarage').find('td').filter(function(){
                
                return $(this).index() === element.index();
                
            }).sortElements(function(a, b){
                
                return $.text([a]) > $.text([b])
                    ? planner.garage.lastSortInverse ? -1 : 1
                    : planner.garage.lastSortInverse ? 1 : -1;
                
            }, function(){
                
                // parentNode is the element we want to move
                return this.parentNode; 
                
            });
    
            planner.garage.lastSortInverse = !planner.garage.lastSortInverse;
                
        }
    },
    save_mech: function(name)
    {
        console.log("planner.garage.save_mech()");
        planner.server.post_mech(
            { a: 's', n: name }, 
            function(data)
            {
                $.extend(planner.mech, data.mech);
                planner.garage.ui.update();    
                planner.drop.ui.update();
            }, 
            function() {}, true
        );
    },
        
    use_mech: function (self)
    {
        n = self.attr("id").substr(1);
        garage = planner.garage.mechs;
        console.log("planner.garage.use_mech("+n+")");
        
        for ( m in garage )
        {
            if ( n == garage[m].id )
            {
                planner.mech.name        = garage[m].name;
                planner.mech.speed       = garage[m].speed;
                planner.mech.mechtype    = garage[m].mechtype;
                planner.mech.weapons     = garage[m].weapons;
                planner.mech.modules     = garage[m].modules;
                planner.mech.equipment   = garage[m].equipment;
                
                planner.drop.ui.update();
            }
        }

        planner.mech.save();
        $("#garage").hide();
        planner.roster.ui.update(function(){ $("#roster").show(); $("#rostercontent").show(); });
    },
    remove_mech: function(self)
    {
        n = self.attr("id").substr(1);
        garage = planner.garage.mechs;
        
        for ( m in garage )
        {
            if ( n == garage[m].id )
            {
                var payload = { 
                    p: planner.mech.player,
                    n: garage[m].name,
                    a: "x",
                }
    
                $.ajax({ 
                    url: "/g",
                    type: "POST",
                    data: payload
                })
                .done( function(data) {
                    setTimeout(planner.garage.ui.update, 1000);
                });
            }
        }
    },
    
    
    rename_mech: function(self, newname)
    {
        n = self.attr("id").substr(1);
        garage = planner.garage.mechs;
    
        for ( m in garage )
        {
            if ( n == garage[m].id )
            {
    
                var payload = { 
                    p: planner.mech.player,
                    n: garage[m].name,
                    u: newname,
                    a: "r",
                }
    
                $.ajax({ 
                    url: "/g",
                    type: "POST",
                    data: payload
                })
                .done( function(data) {
                    setTimeout(planner.garage.ui.update, 500);
                });
            }
        }
    }
});

/*
function scrollMechname (id)
{
    span = $("#rpt" + id);
    div  = $("#lyr" + id);
    l = parseInt(span.css("left"));
    w = parseInt(span.width());
    m = parseInt(div.width());
    
    if (w > m)
    {
        if (gScroll)
        {
            l = l - 2
            
            if ( l + w - parseInt(m/2) < 0 )
                l = 0
        
            setTimeout(function() { scrollMechname(id) }, 100);
        }
        else
        {
            l = 0;
        }
    
        span.css("left", l+"px")
    }
    
    //alert(gScroll + ":" + l + "/" + w + "/" + m);
}

$.each(garage, function(mech) {
    
    $("#scrl" + mech.id).hover(
        function(){
            gScroll = true;
            scrollMechname("{{ mech.name|toID }}");
        },function(){
            gScroll = false;
            scrollMechname("{{ mech.name|toID }}");
        }
    );
});

                
                
















*/

